<template>
    <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>设备管理</el-breadcrumb-item>
                <el-breadcrumb-item>替换信息</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row>
            <el-alert title="使用mqtt 前端使用paho-mqtt" type="success" :closable="false">
            </el-alert>
        </el-row>
    </div>
</template>
<script>
import 'paho-mqtt'
let client
export default {
    data() {
        return {

        }
    },
    methods: {
        init() {
            console.log('init')
            // client = new Paho.MQTT.Client('mqtt://admin:password@172.16.15.232:61623', 61623, "clientId");
            client = new Paho.MQTT.Client('172.16.15.232',1883,'',"AAAA");
            client.onConnectionLost = ()=>{
                this.onConnectionLost
            }
            client.onMessageArrived = ()=>{
                this.onMessageArrived
            }
            client.connect({ onSuccess: ()=>{
                this.onConnect
            } })
            console.log(client)
            console.log(client.getURI)
            console.log(client.isConnected)
        },
        onConnect() {
            console.log('onConnect')
            client.subscribe("World");
            message = new Paho.MQTT.Message("Hello");
            message.destinationName = "World";
            client.send(message);
        },
        onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("onConnectionLost:" + responseObject.errorMessage);
            }
        },
        onMessageArrived(message) {
            console.log("onMessageArrived:" + message.payloadString);
        }
    },
    mounted() {
        this.init()
    }
}
</script>
<style scoped>

</style>